<template>
    <div class="range-list">
        <!-- 经营范围列表 -->
        <el-container>
            <el-header>
                <!-- <el-input v-model="namequery" placeholder="输入样品名字查询" type="text"/> -->
                <el-input v-model="input" placeholder="Please input" />
                <el-button id="qurey" type="primary" @click="myqurey" >查询</el-button>
                <el-button id="add" type="primary" @click="addEvt">新增</el-button>
            </el-header>
            <el-main class="main-list">
                <el-table :data="state.listData" style="width:100%">
                  <el-tabl addMember e-column fixed prop="date" label="Date"/>
                  <el-table-column prop="name" label="经营名称" />
                  <el-table-column prop="product_name" label="产品名称" />
                  <el-table-column prop="price" label="运营价格" />
                  <el-table-column prop="count" label="运营数量" />
                  <el-table-column prop="sale_stime" label="上架时间" />
                  <el-table-column prop="sale_etime" label="下架时间" />
                  <el-table-column prop="address" label="运营范围" />
                   
                  <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                      <el-button link type="primary" size="small" @click="handleClick(scope.row)">编辑</el-button>
                      <el-button link type="primary" size="small" @click="details(scope.row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <div class="demonstration" >共好{{count}}条数据</div>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="count"
                    :page-size="size"
                    @current-change="handleCurrentChange"
                />
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import {rangeListApi}from '@/apis/productlist'
import {ref,reactive}from "vue"
import {useRouter}from "vue-router"
import store from "@/store"
// 数据总数
const count=ref(0)
// 请求页数
const mypage=ref(1)
// 请求条数
const mysize=ref(20)
// 查询搜索框名字
const input=ref('')
const router=useRouter()
// 列表数据
const state=reactive({
    listData:[]
})
//跳编辑页面
const addEvt=()=>{
    router.push("/product/range/edit")
}
//请求列表数据
const list=async({ page = mypage.value, size =mysize.value,name=input.value} = {})=>{
    try {
      // 发送网络请求查询数据
        const {data,code} = await rangeListApi({page, size,name})
        // console.log(data);
        if(code==200){
            // 数据
            state.listData=data.rows
            // 总条数
             count.value=data.count
             //存列表数据在sessionStorage
            
        }
      } catch (error) {
        console.log('error:', error)
      }

    }
list()
//搜索查询
const myqurey=()=>{
    list({name:input.value})
}
// 改变总数时触发
const handleCurrentChange = (val) => {
    list({page:val})
}
//详情页面
const details=(row)=>{
    console.log(row);
    //存储数据
    store.commit("setDetail",row)
    router.push({path: '/product/range/detail',});
}
</script>

<style lang="less" scoped>
@import "@/style/common.less";

.range-list{
    width: calc(100% - 24px);
    // height: calc(100% - 24px);
    height: 850px;
    position: relative;
    padding: 12px;
    // background: cadetblue;
    .el-header {
        display: block;
        height: 49px;
        padding: 8px 12px;
        border-bottom: 1px solid #ddd;
        text-align: right;
        display: flex;
        justify-content: right;
        align-items: center;

        // .el-input {
        //     margin: 0px 10px;
        //     width: 200px;
        // }
        #qurey{
            background: @m7;
        }
        .el-input{
           margin-right:10px;
           width: 200px;
        }
    }

    .el-button:last-child {
        background: @h1;
        color: @h13;
        border: none;


    }

    .el-main {
        height:600px;
        width: 100%;
        padding: 10px;
        // background: red;
        .el-table{
          width: 100%;
          height: 100%;
          .el-table-column{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
          }
        }
    }

    .el-footer {
        height: 43px;
        width: calc(100% - 20px);
        position: absolute;
        bottom: 0;
        border-top: 1px solid @h6;
        padding: 5px;
        display: flex;
        justify-content:right;
         align-items: center;
        .demonstration{
            margin-left: 5px;
        }
        
    }
    .demonstration{
        margin-right: 10px;
    }
}
</style>
